<template>
  <div class='container'>
    <el-card>
      <!-- 筛选表单区域 -->
      <div class="flex-box">
        <el-form label-width="80px"
                 inline
                 size="small">
          <el-form-item label="关键字">
            <el-input v-model="query.keyword"
                      clearable
                      placeholder="根据文章标题搜索"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="query.state"
                       placeholder="请选择状态">
              <el-option value="1"
                         label="已启用">
              </el-option>
              <el-option value="0"
                         label="已禁用">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="onCancel">取消</el-button>
            <el-button type="primary"
                       @click="onSeach">搜索</el-button>
          </el-form-item>
        </el-form>
        <el-button type="success"
                   size="small"
                   @click="addVisible=true">新增技巧</el-button>
      </div>
      <el-alert :title="`总共${total}条数据`"
                type="info"
                effect="light"
                show-icon
                closable></el-alert>

      <!-- 表单区域 -->
      <el-table :data="articleList"
                border>
        <el-table-column type="index"
                         label="序号">
        </el-table-column>
        <el-table-column prop="title"
                         label="文章标题"
                         width="180">
        </el-table-column>
        <el-table-column prop="visits"
                         label="阅读数">
        </el-table-column>
        <el-table-column prop="username"
                         label="录入人">
        </el-table-column>
        <el-table-column prop="createTime"
                         label="录入时间">
          <template slot-scope="scope">
            {{scope.row.createTime | parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="state"
                         label="状态">
          <template slot-scope="scope">
            {{scope.row.state===1?'已启用':'已禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 预览 -->
            <el-button type="text"
                       size="small"
                       @click="previewArticle(scope.row.id,scope.row.username)">预览</el-button>
            <!-- 启用/禁用 -->
            <el-button v-if="scope.row.state==0"
                       type="text"
                       size="small"
                       @click="stateChange(scope.row.id,1)">已启用</el-button>
            <el-button v-else
                       type="text"
                       size="small"
                       @click="stateChange(scope.row.id,0)">已禁用</el-button>
            <!-- 修改 -->
            <el-button type="text"
                       size="small"
                       :disabled="scope.row.state===1"
                       @click="editArticle(scope.row)">修改</el-button>
            <!-- 删除 -->
            <el-button type="text"
                       size="small"
                       :disabled="scope.row.state===1"
                       @click="delArticle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="query.page"
                     :page-sizes="[10, 20, 30, 40]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination> -->
      <!-- 分页区域 -->
      <page-tool @pageChange="pageChange"
                 :total="total"
                 @pageSizeChange="pageSizeChange" />

      <!-- 新增弹框 -->
      <el-dialog title="添加文章"
                 v-model="addVisible"
                 :visible.sync="addVisible"
                 width="50%">
        <articles-add v-if="addVisible"
                      @close="addVisible=false"
                      @addAstr="addA" />

      </el-dialog>
      <!-- 新增弹框 -->

      <!-- 修改弹框 -->
      <el-dialog title="修改文章"
                 v-model="editForm"
                 :visible.sync="editVisible"
                 width="50%">
        <articles-edit v-if="editVisible"
                       :editForm="editForm"
                       @close="editVisible=false"
                       @editAstr="editA" />

      </el-dialog>
      <!-- 修改弹框 -->

      <!-- 预览弹框 -->
      <el-dialog title="预览文章"
                 v-model="showForm"
                 :visible.sync="previewVisible"
                 width="50%">
        <articles-preview :showForm="showForm" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, detail, remove, changeState } from '@/api/hmmm/articles'
import ArticlesAdd from '@/module-hmmm/components/articles-add'
import ArticlesEdit from '@/module-hmmm/components/articles-edit'
import ArticlesPreview from '@/module-hmmm/components/articles-preview'
import PageTool from '@/module-dashboard/components/pageTool'

export default {
  name: 'Article',
  components: {
    ArticlesAdd,
    ArticlesEdit,
    ArticlesPreview,
    PageTool
  },
  data() {
    return {
      articleList: [],
      query: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      total: 0,
      addVisible: false,
      editVisible: false,
      editForm: {},
      showForm: {},
      previewVisible: false
    }
  },
  methods: {
    // 获取文章数据
    getArticleList() {
      list({ page: this.query.page, pagesize: this.query.pagesize, keyword: this.query.keyword }).then((data) => {
        this.articleList = data.data.items
        this.total = data.data.counts
        console.log(data)
      })
    },
    pageChange(page) {
      this.query.page = page

      this.getArticleList()
    }, // 监听每页数变化
    pageSizeChange(pagesize) {
      this.query.pagesize = pagesize
      //   console.log(this.query.pagesize)

      this.getArticleList()
    },
    // 搜索按钮
    onSeach() {
      this.query.page = 1
      this.getArticleList()
    },
    // 取消按钮
    onCancel() {
      this.query.page = 1
      this.query.keyword = ''
      this.query.state = null
      this.getArticleList()
    },
    // 新增
    addA() {
      this.getArticleList()
    },
    // 回显
    editArticle(id) {
      // console.log(id)
      detail(id).then((data) => {
        console.log(data)
        this.editForm = data.data
        console.log(this.editForm)
      })
      this.editVisible = true
    },
    // 修改
    editA() {
      this.getArticleList()
    },
    // 删除
    delArticle(id) {
      this.$confirm('此操作将永久删除文章 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          remove({ id }).then(() => {
            this.$message.success('成功删除了文章' + '!')
            this.articleList.splice(id)
            this.getArticleList()
          })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 切换文章状态
    stateChange(id, num) {
      console.log(111)
      changeState({ id: id, state: num }).then(() => {
        this.$message.success('操作成功')
        this.getArticleList()
      })
    },
    // 预览
    previewArticle(id, username) {
      detail({ id: id, username: username }).then((data) => {
        console.log(data.data)
        this.showForm = data.data
        data.data.username = username
      })
      this.previewVisible = true
    }
  },
  created() {
    this.getArticleList()
  }
}
</script>

<style scoped>
.container {
  padding: 10px;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
